<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>7、state</title>
</head>
<body>
    <div id="test"></div>

    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/babel">
        class Weather extends React.Component{
            constructor(pros){
                super(pros)
                this.state = {isHot:true, wind: '微风'}
                // 构造方法执行时，实例对象上并不存在changeWeather，因此去原型上找到changeWeather方法。
                // 通过bind生成一个新函数，并改变其中的this指向为当前对象
                // onClick方法调用时，调用到实例对象上的changeWeather方法
                this.changeWeather = this.changeWeather.bind(this)
            }

            render(){
                const {isHot} = this.state
                return (
                    // 方法被重写过，且赋值时不带()
                    <h1 onClick={this.changeWeather}>今天的天气很{isHot ? '炎热' : '凉爽'}</h1>
                )
            }
            changeWeather() {
                // changeWeather放在哪？Weather的原型对象上，供Weather的实例对象调用
                // changeWeather作为onCLick的回调函数，所以不是通过实例调用的，而是直接调用
                // 类中的方法默认开启了局部的严格模式，所以changeWeather中的this是undefined

                // 不能直接修改，React不认可，要通过setState修改
                // this.state.isHot = !this.state.isHot

                // setState，更新是一种合并，并非替换
                const {isHot} = this.state
                this.setState({isHot: !isHot})
            }
        }

        ReactDOM.render(<Weather/>, document.getElementById('test'))
    </script>
</body>
</html>